<template>
	<view class="container">
		<view class="tui-bg-box">
			<image src="../../s/login/bg_login.png" class="tui-bg-img"></image>
			<image src="../../s/my/mine_def_touxiang_3x.png" class="tui-photo"></image>
			<view class="tui-login-name">软云框架</view>
		</view>
		<form :report-submit="true" @submit="formLogin">
			<view class="tui-login-from">
				<view class="tui-line-cell">
					<tui-icon name="mobile" :size="20" color='#5677fc'></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号码" maxlength="11" v-model="mobile"
					 type="number" />
				</view>
				<view class="tui-line-cell tui-top28">
					<tui-icon name="pwd" :size="20" color='#5677fc'></tui-icon>
					<input placeholder-class="phcolor" class="tui-input" name="smsCode" placeholder="请输入密码" :password="true" />
				</view>
				<button class="btn-primary tui-btn-submit" hover-class="btn-hover" form-type="submit">登录</button>
				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">点击"登录"即表示已同意
					<text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import tuiIcon from "@/components/icon/icon"
	import tuiButton from "@/components/button/button"
	const util = require('../../utils/util.js')
	const md5 = require('../../utils/md5.js')
	import userList from '../../tim_commen/tim/user.js';

	export default {
		components: {
			tuiIcon,
			tuiButton
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady
			})
		},
		data() {
			return {
				disabled: false,
				btnText: "获取验证码",
				mobile: "",
				data: null,
				type: "primary",
				code: "",
				loginParams: {

				}
			}
		},
		onShow() {
			this.$store.commit('reset')
		},
		methods: {
			formLogin: function(e) {
				let that=this
				let password = e.detail.value.smsCode;
				let mobile = e.detail.value.mobile;
				if (util.isNullOrEmpty(mobile)) {
					this.tui.toast('请输入手机号码');
					return
				} else if (!util.isMobile(mobile)) {
					this.tui.toast('请输入正确的手机号码');
					return
				} else if (util.isNullOrEmpty(password)) {
					this.tui.toast('请输入密码');
					return
				}
				
				// this.api.login({
				// 		mobile: mobile,
				// 		password: md5.hex_md5(password),
				// 		userType: 0
				// 	})
				// 	.then((res) => {
				// 		//var info = plus.push.getClientInfo(); // 获取推送客户端信息，传给后台
				// 		//console.log(info)
				// 		this.cacheHelper.setToken(res)
				// 		let userInfo = null
				// 		userList.forEach((item) => {
				// 			if (item.user == 'tsj') {
				// 				userInfo = item
				// 			}
				// 		})
				// 		let promise = this.tim.login({
				// 			userID: '1',
				// 			userSig: 'eJwtzNEKwiAYBeB38bYYv07LBl3JYEG7Kuo6UuOvNkSHbYvePdl2c*B8B86XnI*nLBpPCsIyIOupozZthxYnpgsG-bo5h5oUlAPknDPK58X0Dr1JLoRgADBrh81kUsgUXC4v*EifhtpxeKum1lKVh*slRLYZ-Hasyqeq6hXi7hP63MZ7y-fk9wcVYjAQ'
				// 		}); //im 登录
				// 		promise.then((res) => {
				// 			console.log(" im 登录成功")
				// 			//登录成功后 更新登录状态
				// 			this.$store.commit("toggleIsLogin", true);
				// 			//自己平台的用户基础信息
				// 			uni.setStorageSync('userInfo', JSON.stringify(userInfo))
				// 			//tim 返回的用户信息
				// 			uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
				// 			uni.switchTab({
				// 				url: '../main/main'
				// 			});
				// 		}).catch((err) => {
				// 			console.warn('login error:', err); // 登录失败的相关信息
				// 		});

				// 	})
				// 	.catch((err) => {
				// 		this.tui.toast(err.message)
				// 		console.log(err)
				// 	})
			}
		
		
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44rpx;
	}

	.tui-photo {
		height: 138rpx;
		width: 138rpx;
		display: block;
		margin: 10rpx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 128rpx;
		height: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 36rpx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 346rpx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 128rpx 104rpx 0 104rpx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32rpx;
		flex: 1;
		display: inline-block;
		padding-left: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27rpx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28rpx;
	}

	.tui-btn-class {
		width: 196rpx !important;
		height: 54rpx !important;
		border-radius: 27rpx !important;
		font-size: 28rpx !important;
		padding: 0 !important;
		line-height: 54rpx !important;
	}

	.tui-btn-submit {
		margin-top: 100rpx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
		margin-top: 29rpx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>
